<template>
    <div class="wrapper">
        <header>
            <ElMenu class="el-menu" mode="horizontal" :ellipsis="false">
                <img src="@/assets/logo.png" alt="">
                <div class="flex-grow" />
                <ElSubMenu index="1">
                    <template #title>{{ user.username }}({{ user.role_name }})</template>
                    <ElMenuItem index="11">修改密码</ElMenuItem>
                    <ElMenuItem index="12" @click="exit">退出</ElMenuItem>
                </ElSubMenu>
            </ElMenu>
        </header>
        <section>
            <aside>
                <ElMenu @select="selectRoute">
                    <template v-for="item in menus" :key="item.id">
                        <ElSubMenu v-if="item.type === menuType.分类" :index="item.id + ''">
                            <template #title>
                                <span>{{ item.name }}</span>
                            </template>
                            <ElMenuItem v-for="child in item.children" :key="child.id" :index="child.code">
                                {{ child.name }}
                            </ElMenuItem>
                        </ElSubMenu>
                        <ElMenuItem v-else :index="item.code">
                            {{ item.name }}
                        </ElMenuItem>
                    </template>
                </ElMenu>
            </aside>
            <main>
                <RouterView></RouterView>
            </main>
        </section>
    </div>
</template>

<script lang="ts" setup>
import { useStore } from 'vuex';
import { ElMessageBox } from 'element-plus';
import { computed } from 'vue';
import { IMenu } from '@/api/menus';
import { menuType } from '@/utils/consts.js';
import { useRouter } from 'vue-router';
const store = useStore();
const user = store.state.user;
const router = useRouter();

/**
 * 菜单
 */
const menus = computed(() => {
    const _menus = store.state.myMenus as IMenu[];
    const parents = _menus.filter(c => c.pid === 0).map(c => ({ ...c }));
    for (const parent of parents) {
        const children = _menus.filter(c => c.type !== menuType.权限 && c.pid === parent.id);
        if (children.length) {
            parent.children = children;
        }
    }
    return parents;
});

/**
 * 退出
 */
const exit = async () => {
    try {
        await ElMessageBox.confirm('您确定要退出吗？', '询问');
        store.dispatch('exit');
    } catch (error) { }
}

/**
 * 选中路由
 */
const selectRoute = (name: string) => {
    router.push({ name });
}
</script>

<style lang="scss" scoped>
.wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;

    &>header {
        height: 50px;
        flex-shrink: 0;
        border-bottom: 1px solid #dddddd;

        .el-menu {
            height: 50px;
            border-bottom: none !important;

            img {
                margin-left: 20px;
                height: 100%;
            }

            .flex-grow {
                flex-grow: 1;
            }
        }
    }

    &>section {
        flex: 1;
        display: flex;
        overflow: hidden;

        aside {
            width: 200px;
            border-right: 1px solid #eee;

            :deep .el-menu {
                border-right: 0;
            }
        }

        main {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
        }
    }
}
</style>